<template>
  <div class="eatfoot">
    <!-- <h1>逛吃</h1> -->
    <ul class="_ul">
      <waterfall :col="2" :data="Gourmetlist" @loadmore="loadmore">
        <StrollAndEat class="list" v-for="(item, index) in Gourmetlist" :key="index" :item="item" :index="index">
        </StrollAndEat>
      </waterfall>
    </ul>

    <ul v-if="Gourmetlist.length == 0">
      <van-skeleton title avatar :row="3" v-for="item in 5" :key="item" />
    </ul>

  </div>
</template>

<script>
import StrollAndEat from "@/components/StrollAndEat.vue";

export default {
  data() {
    return {
      Gourmetlist: [],
      page: 1,
    };
  },
  components: {
    StrollAndEat,
  },
  created() {
    this.axios
      .get(
        `https://api.kele8.cn/agent/http://food.boohee.com/fb/v1/feeds/category_feed?page=${this.page}&category=1&per=10`
      )
      .then((res) => {
        this.Gourmetlist = res.data.feeds;
      });
  },
  methods: {
    loadmore() {
      // 需要通过路由名称来判断,其他页面触底也会有加载动画
      if (this.$route.name == "GongToEat") {
        this.$toast({
          type: "loading",
          overlay: true,
          forbidClick: true,
          message: "加载中",
          duration: 0,
        })
      }

      this.page++;
      this.axios
        .get(
          `https://api.kele8.cn/agent/http://food.boohee.com/fb/v1/feeds/category_feed?page=${this.page}&category=1&per=10`
        )
        .then((res) => {
          this.Gourmetlist.push(...res.data.feeds);
          this.$toast.clear();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.eatfoot {
  width: 100vw;

  ._ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // padding-bottom: 8vh
  }
}
</style>